<template>
	<!-- pages/category/index.wxml -->
	<!-- <text>pages/category/index.wxml</text> -->
	<view class="cates">
		<!-- 搜索框 -->
		<SearchInput></SearchInput>
		<view class="cates_container">
			<!-- 左侧菜单 -->
			<scroll-view class="left_menu" scroll-y>
				<!-- view{$}*100 -->
				<!-- data-index  事件传参 -->
				<view :class="'menu_item '+(index === currentIndex? 'active': '')" @click="handleItemTap" :data-index="index"
					v-for="(item,index) in (leftMenuList)" :key="item.id">
					{{item}}
				</view>
			</scroll-view>
			<!-- 右侧菜单 -->
			<scroll-view class="right_content" scroll-y :scroll-top="scrollTop">
				<view class="goods_group" v-for="(item1,index1) in (rightContent)" :key="item1.id">





					<view class="goods_title">
						<text class="delimeter">/</text>
						{{item1.cat_name}}
						<text class="delimeter">/</text>
					</view>










					<view class="goods_list">
						<navigator :url="" /pages /goods_list /index?cid="+(item2.cat_id)" v-for="(item2,index2) in (item1.children)"
							:key="item2.cat_id">





							<image class="" mode="widthFix" :src="item2.cat_icon"></image>










							<view class="goods_name">{{item2.cat_name}}</view>





						</navigator>
					</view>





				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import SearchInput from "../../components/SearchInput/SearchInput";
	import {
		request
	} from '../../request/index.js';
	import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入
	// pages/category/index.js

	export default {
		components: {
			SearchInput
		},
		data() {
			return {
				cates: [],
				// 接口的返回数据
				leftMenuList: [],
				// 左侧的菜单数据
				rightContent: [],
				// 右侧的商品数据
				currentIndex: 0,
				// 当前选中的菜单
				scrollTop: 0 // 右侧内容的滚动条距离顶部的距离

			};
		},
		/**
			* 生命周期函数--监听页面加载
			*/
		onLoad: function(options) {
			/**
				*    web中的本地存储和小程序中的本地存储的区别
				*    1 写代码的方式不一样了
				*        web: localStorage.setItem('key','value')  localStorage.getItem('key')
				*        小程序: wx.setStorageSync('key', 'value') wx.getStorageSync('key')
				*    2 存的时候有没有做转换
				*        web: 不管存的是什么类型的数据,最终会调用toString(),把数据转换成字符串再存入进去
				*        小程序: 不存在类型转换的这个操作，存什么类型的数据进去，获取的时候就是什么类型
				*    3 wx.setStorageSync与wx.setStorage的区别
				*      setStorageSync与wx同步缓存就是必须要同步方法处理完，程序才能继续向下执行
				*      setStorage异步方法无论方法执行成功与否，都会继续向下执行
				*      在微信小程序中，异步不管保没保存成功,程序都会继续往下执行.
				*      同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。
				*    
				*    此处的逻辑为:
				*    1.先判断一下本地存储中有没有旧的数据 {time:Date.now(),data: [...]}
				*    2.没有旧数据，直接发送请求
				*    3.有旧数据，同时旧的数据也没有过期，就使用本地存储中的旧数据即可
				*/
			// 1.获取本地存储中的数据
			const cateStorage111 = uni.getStorageSync('cateStorage'); // console.log(Date.now()) // 当前时间戳 1603680177638
			// 2.判断

			if (!cateStorage111) {
				// 不存在 发送请求
				console.log('不存在旧数据，重新发送请求');
				this.getCates(); // console.log(cate_storage)
			} else {
				// 有旧数据 过期时间暂时设置成10s 
				// console.log(cate_storage)
				console.log('存在旧数据');

				if (Date.now() - cateStorage111.time > 1000 * 10) {
					// 数据过期  重新发送请求
					console.log('旧数据过期  重新发送请求');
					this.getCates();
				} else {
					// 旧数据未过期  引用旧数据
					console.log('旧数据未过期  继续引用旧数据');
					this.cates = cateStorage111.data; // 左侧的大菜单

					let leftMenuList = this.cates.map(v => v.cat_name); // 右侧菜单

					let rightContent = this.cates[0].children;
					this.setData({
						leftMenuList,
						rightContent
					});
				}
			} // this.getCates() // 分类数据

		},
		/**
			* 生命周期函数--监听页面初次渲染完成
			*/
		onReady: function() {},
		/**
			* 生命周期函数--监听页面显示
			*/
		onShow: function() {},
		/**
			* 生命周期函数--监听页面隐藏
			*/
		onHide: function() {},
		/**
			* 生命周期函数--监听页面卸载
			*/
		onUnload: function() {},
		/**
			* 页面相关事件处理函数--监听用户下拉动作
			*/
		onPullDownRefresh: function() {},
		/**
			* 页面上拉触底事件的处理函数
			*/
		onReachBottom: function() {},
		/**
			* 用户点击右上角分享
			*/
		onShareAppMessage: function() {},
		methods: {
			/**
				* 获取分类数据
				* 常规模式请求
				*/
			getCates() { // request({ url: '/categories' }).then(res => {
				//     // console.log(res)
				//     if (res.data.meta.status === 200) {
				//         this.cates = res.data.message
				//         console.log(this.cates)
				//         // 把接口的数据存入到本地存储中 此处的cates就是上面的this.cates = res.data.message
				//         wx.setStorageSync('cateStorage', { time: Date.now(), data: this.cates })
				//         // 左侧的大菜单
				//         let leftMenuList = this.cates.map(v => v.cat_name)
				//         // 右侧菜单
				//         let rightContent = this.cates[0].children
				//         this.setData({
				//             leftMenuList,
				//             rightContent
				//         })
				//         console.log(leftMenuList, rightContent)
				//     }
				// })
			},

			/** 
				* async语法 async同步的意思
				* 使用es7的async await来发送请求.
				* await request({ url: '/categories' })这一步是异步代码
				* const res = await request({ url: '/categories' })变成同步代码
				* 所以res请求不成功的话，下面的代码是执行不了的
				*/
			async getCates() {
				const res = await request({
					url: '/categories'
				}); // console.log(res)
				// this.cates = res.data.message

				this.cates = res;
				console.log(this.cates); // 把接口的数据存入到本地存储中 此处的cates就是上面的this.cates = res.data.message

				uni.setStorageSync('cateStorage', {
					time: Date.now(),
					data: this.cates
				}); // 左侧的大菜单

				let leftMenuList = this.cates.map(v => v.cat_name); // 右侧菜单

				let rightContent = this.cates[0].children;
				this.setData({
					leftMenuList,
					rightContent
				}); // console.log(leftMenuList, rightContent)
			},

			/**
				* 点击左侧菜单栏切换菜单的点击事件
				*/
			handleItemTap(e) {
				console.log(e);
				const {
					index
				} = e.currentTarget.dataset; // 右侧菜单需要跟着变化

				let rightContent = this.cates[index].children; // console.log(index)

				this.setData({
					currentIndex: index,
					rightContent,
					scrollTop: 0 // 点击左侧菜单栏，重新设置右侧内容的scroll-view标签的距离顶部的距离

				});
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>